﻿
@{
    Layout = null;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="~/css/share.css">
    <link rel="stylesheet" href="~/css/layui.css">
    <link href="~/css/Roboto.css" rel="stylesheet">
</head>

<body>
    <!-- 遮罩 -->
    <div class="mask">
        <!-- 弹出层 -->
        <div class="layer">
            <p>是否要提交文章内容？</p>
            <div class="layer_button">
                <div class="button_type color_blue">确定</div>
                <div class="button_type color_red">取消</div>
            </div>
        </div>
    </div>
    <!-- 页面主体 -->
    <div class="continer">
        <!-- 返回主页 -->
        <div class="home">
            <a href="~/ManageUsers">&lt; 返回主页</a>
        </div>
        <!-- 标题 -->
        <div class="big_title">
            <h1>添加用户</h1>
        </div>
        <div class="form_block">
            <form class="layui-form" style="transform: translateX(-30px);">
                <input type="text" name="author" style="display:none;" value="123">
                <div class="layui-form-item">
                    <label class="layui-form-label">Id</label>
                    <div class="layui-input-block">
                        <input type="text" name="userid" placeholder="请输入ID" autocomplete="off" class="layui-input"
                               required lay-verify="required">
                    </div>
                </div>
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">用户名</label>
                    <div class="layui-input-block">
                        <textarea name="username" placeholder="请输入用户名" required lay-verify="required" class="layui-textarea"
                                  style=" min-height: 0; resize: none;"></textarea>
                    </div>
                </div>
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">密码</label>
                    <div class="layui-input-block">
                        <textarea name="userpassword" placeholder="请输入密码" required lay-verify="required" class="layui-textarea"
                                  style="min-height:0;resize: none;"></textarea>
                    </div>
                </div>
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">邮箱</label>
                    <div class="layui-input-block">
                        <textarea name="useremail" placeholder="请输入邮箱" required lay-verify="required" class="layui-textarea"
                                  style="min-height: 0; resize: none;"></textarea>
                    </div>
                </div>
                <div class="button_type hand_out">提交</div>
            </form>
        </div>
        <div class="black"></div>
    </div>


</body>

</html>
<script src="/js/jquery-3.6.0.min.js"></script>
<script>
    window.onload = function () {
        // 提交按钮触发弹出层
        $(".hand_out").click(function () {
            console.log("点击了提交按钮")
            $('.mask').css("display", "block");
        })

        // 确认提交
        $('.color_blue').click(function () {
            $('.mask').css("display", "none");
            send_Message();
        })

        // 取消提交
        $('.color_red').click(function () {
            $('.mask').css("display", "none");
        })
    }

    // 提交信息逻辑
    // 发送按钮
    function send_Message() {
        // 获取表单信息
        let author = localStorage.getItem("AdminName")
        // console.log(author)
        let userid = $('input[name="userid"]').val();
        let username = $('textarea[name="username"]').val();
        let userpassword = $('textarea[name="userpassword"]').val();
        let useremail = $('textarea[name="useremail"]').val();
        $.ajax({
            type: "post",
            url: "./api/AddUser",
            data: { "UserId": userid, "UserName": username, "UserPassword": userpassword, "UserEmail": useremail },
            dataType: "json",
            // 博客文章提交成功
            success: function (data) {
                console.log(data);
                $('input[name="userid"]').val()
                $('textarea[name="username"]').val()
                $('textarea[name="userpassword"]').val()
                $('textarea[name="useremail"]').val()
                alert('提交成功')
                window.location.href = "./ManageUsers";
            },
            // 提交失败
            error: function (data) {
                console.log(data);
                alert('提交失败')
            }
        });
    }
</script>